<template>
  <div class="body0">
    <el-card style="margin: 0 auto;padding: 0">
      <div class="searchbar">
        <img class="biglogo" src="../../assets/imgs/logo-01-b-01.png">
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-cart-2" @click="tocart">我的购物车</el-button>
        <el-button style="float: right;margin-top: 15px;margin-left: 20px;"  icon="el-icon-shopping-bag-2" @click="toorder">我的订单</el-button>
        <div class="search" style="width: 450px;">
          <el-input placeholder="请输入商品名" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </el-card>
    <el-card style="width: 1190px;margin: 0 auto;margin-top: 20px;text-align: left"shadow="never">
      我的购物车
    </el-card>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 1190px;margin: 0 auto;margin-top: 20px;"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
          align="center">
      </el-table-column>
      <el-table-column
          prop="productUrl"
          label="商品主图"
          width="120"
      align="center">
        <el-image
            style="width: 100px; height: 100px"
            :src="require('../../assets/stx-mall/detail/img.png')"
            :fit="fit">
        </el-image>
      </el-table-column>
      <el-table-column
          prop="productBrief"
          label="商品简介">
      </el-table-column>
      <el-table-column
          prop="price"
          label="单价"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="receiveAddress"
          label="收货地址"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="receiveName"
          label="收货人"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="productCount"
          label="数量"
          width="200"
          align="center">
        <el-input-number size="mini" v-model="num4"></el-input-number>
      </el-table-column>
      <el-table-column
          prop="operation"
          label="操作"
          width="120"
          align="center">
        <el-button size="mini" style="margin: 0 auto;margin-bottom: 5px; background-color: rgb(227, 31, 27);font-size: 10px;" type="danger" round>删除</el-button>
        <el-button size="mini" style="margin: 0 auto;margin-bottom: 5px; background-color: rgb(64, 158, 255);font-size: 10px;border: none" type="danger" round>支付</el-button>
      </el-table-column>
    </el-table>
    <div style="width: 1190px;margin: 0 auto; margin-top: 20px;margin-bottom: 20px;">
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
      <el-card style="height: 60px;position: fixed;bottom: 0;width: 100%">
        <div style="width: 1190px;margin: 0 auto;">
          <el-checkbox style="float: left;margin-left: 20px;" v-model="checked">全选</el-checkbox>
          <el-button style="float: right;position: relative;bottom: 10px;background-color: rgb(227, 31, 27);color: white">去结算</el-button>
          <span style="margin-right: 20px;font-size: 20px;color: rgb(227, 31, 27);float: right">￥1459</span>
          <span style="margin-right: 5px;float: right">总价:</span>
          <span style="margin-right: 20px;float: right">已选择1件商品</span>
        </div>
      </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
      num4: 1,
      tableData: [{
        productUrl:[],
        productBrief: '跑步机家用降噪可折叠免安装宽大跑台（支持HUAWEI HiLink）',
        price: '￥1459',
        receiveAddress:'上海市-徐汇区',
        receiveName:'大锤',
        productCount:'',
        operation:'',

      }],
      multipleSelection: []
    }
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tocart(){
      this.$router.go(0)
    },
    toorder(){
      this.$router.push('order')
    },

  }
}
</script>
<style>

.searchbar{
  width: 900px;margin: 0 auto;height: 70px;
}
.search{
  float: right;margin-top: 15px;
}
.biglogo{
  width: 100px;float: left;
}

.el-main{
  margin: 0;padding: 0;
}


</style>